<template>
  <a-card title="抬头管理">
    <template slot="extra">
      <a-button type="danger" @click="addInvTitle">
        添加抬头
      </a-button>
    </template>
    <a-empty v-if="invoiceList.length == 0">
      <span slot="description"> 暂无发票抬头数据~~ </span>
      <a-button type="danger" @click="addInvTitle">
        立即添加
      </a-button>
    </a-empty>
    <div class="invtit-list">
      <a-row :gutter="20">
        <a-col v-for="item in invoiceList" :key="item.id" :span="12">
          <a-card>
            <p v-if="item.username != ''">姓名: {{item.username}}</p>
            <p v-if="item.company_name != ''">公司名称: {{item.company_name}}</p>
            <p v-if="item.phone != ''">联系电话: {{item.phone}}</p>
            <p v-if="item.company_phone != ''">公司电话: {{item.company_phone}}</p>
            <template slot="actions" class="ant-card-actions">
              <a-icon key="edit" type="delete" @click="delInvTit(item.id)" />
            </template>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <a-modal
      :confirm-loading="loading"
      title="添加发票抬头"
      v-model="visible"
      @ok="onSubmit"
    >
      <a-spin :spinning="spinning">
        <a-form-model
          ref="invoiceForm"
          :model="invoiceForm"
          :rules="invoiceForm.type != 20 ? invoiceRules : invoiceRules1"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item label="发票抬头类型" prop="type">
            <a-radio-group v-model="invoiceForm.type" @change="onChange">
              <a-radio v-for="(item,index) in typeOpts" :key="index" :value="index">{{item}}</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item v-if="invoiceForm.type != 20" label="姓名" prop="username">
            <a-input v-model="invoiceForm.username" type="text" placeholder="请输入姓名" />
          </a-form-model-item>
          <a-form-model-item v-if="invoiceForm.type != 20" label="联系电话" prop="phone">
            <a-input v-model="invoiceForm.phone" type="text" placeholder="请输入联系电话" />
          </a-form-model-item>
          <a-form-model-item v-if="invoiceForm.type == 20" label="公司名称" prop="company_name">
            <a-input v-model="invoiceForm.company_name" type="text" placeholder="请输入公司名称" />
          </a-form-model-item>
          <a-form-model-item v-if="invoiceForm.type == 20" label="社会代码" prop="social_code">
            <a-input v-model="invoiceForm.social_code" type="text" placeholder="请输入社会代码" />
          </a-form-model-item>
          <a-form-model-item v-if="invoiceForm.type == 20" label="开票地址">
            <a-input v-model="invoiceForm.invoice_address" type="text" placeholder="请输入开票地址" />
          </a-form-model-item>
          <a-form-model-item v-if="invoiceForm.type == 20" label="公司电话">
            <a-input v-model="invoiceForm.company_phone" type="text" placeholder="请输入公司电话" />
          </a-form-model-item>
          <a-form-model-item v-if="invoiceForm.type == 20" label="开户银行">
            <a-input v-model="invoiceForm.account_bank" type="text" placeholder="请输入开户银行" />
          </a-form-model-item>
          <a-form-model-item v-if="invoiceForm.type == 20" label="银行账号">
            <a-input v-model="invoiceForm.bank_num" type="text" placeholder="请输入开户银行" />
          </a-form-model-item>
        </a-form-model>
      </a-spin>
    </a-modal>
  </a-card>
</template>

<script>
import store from 'store'
import { NAME } from '@/store/mutation-types'
import { delInvTit, getAddInvTit, getInvTitList, postAddInvTit } from '@/api/invoice'

export default {
  name: 'InvoiceTitle',
  data () {
    return {
      labelCol: { span: 5 },
      wrapperCol: { offset: 1, span: 14 },
      visible: false,
      invoiceList: [],
      invoiceForm: {},
      invoiceRules: {
        type: [{ required: true, message: '选择抬头类型', trigger: 'change' }],
        username: [{ required: true, message: '必须输入姓名', trigger: 'blur' }],
        phone: [{ required: true, message: '必须输入电话', trigger: 'blur' }]
      },
      invoiceRules1: {
        type: [{ required: true, message: '选择抬头类型', trigger: 'change' }],
        company_name: [{ required: true, message: '必须输入公司名称', trigger: 'blur' }],
        social_code: [{ required: true, message: '必须输入社会代码', trigger: 'blur' }]
      },
      loading: false,
      typeOpts: {},
      phone: store.get(NAME),
      spinning: false
    }
  },
  created () {
    this.getInvoiceTitList()
  },
  methods: {
    getInvoiceTitList () {
      getInvTitList().then(res => {
        this.invoiceList = res.result.data
      })
    },
    addInvTitle () {
      this.spinning = true
      this.invoiceForm = {}
      getAddInvTit().then(res => {
        if (this.invoiceForm.type !== 20) {
          this.invoiceForm.phone = this.phone
        } else {
          this.invoiceForm.company_phone = this.phone
        }
        this.typeOpts = res.result.typeOpts
        this.spinning = false
        this.visible = true
      })
    },
    delInvTit (id) {
      delInvTit(id).then(res => {
        this.getInvoiceTitList()
      })
    },
    onChange (e) {
      if (e.target.value === '10') {
        delete this.invoiceForm.company_phone
        this.invoiceForm.phone = this.phone
      } else {
        delete this.invoiceForm.phone
        this.invoiceForm.company_phone = this.phone
      }
    },
    onSubmit () {
      const app = this
      app.loading = true
      app.$refs.invoiceForm.validate(valid => {
        if (valid) {
          postAddInvTit(app.invoiceForm).then(res => {
            if (res.status === 0) {
              app.loading = false
              app.visible = false
              app.getInvoiceTitList()
            } else {
              app.loading = false
              app.$warning({
                title: res.msg
              })
            }
          })
        } else {
          app.loading = false
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
